{% extends "base.html" %}

{% block title %}预约详情 - 乒乓球培训管理系统{% endblock %}

{% block page_title %}预约详情{% endblock %}

{% block extra_css %}
<style>
    .detail-container {
        max-width: 1200px;
        margin: 0 auto;
    }

    /* 主卡片样式 - 更简洁 */
    .detail-card {
        background: white;
        border-radius: 8px;
        padding: 24px;
        margin-bottom: 16px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.08);
        position: relative;
    }

    /* 状态标签 - 更醒目 */
    .status-badge {
        display: inline-block;
        padding: 6px 12px;
        border-radius: 6px;
        font-weight: 500;
        font-size: 0.875rem;
        margin-bottom: 16px;
    }

    .status-pending {
        background: #FEF3C7;
        color: #92400E;
    }

    .status-confirmed {
        background: #DBEAFE;
        color: #1E3A8A;
    }

    .status-cancelled {
        background: #FEE2E2;
        color: #991B1B;
    }

    .status-completed {
        background: #D1FAE5;
        color: #065F46;
    }

    .status-no_show {
        background: #F3F4F6;
        color: #374151;
    }

    /* 头部区域 */
    .detail-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 24px;
        padding-bottom: 16px;
        border-bottom: 1px solid #E5E7EB;
    }

    .detail-title {
        flex: 1;
    }

    .detail-title h4 {
        margin: 0 0 8px 0;
        font-size: 1.25rem;
        color: #111827;
    }

    .detail-subtitle {
        color: #6B7280;
        font-size: 0.875rem;
    }

    /* 核心信息区 - 简化布局 */
    .core-info {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 24px;
        margin-bottom: 24px;
    }

    .info-item {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .info-icon {
        width: 40px;
        height: 40px;
        background: #F3F4F6;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #4B5563;
    }

    .info-content {
        flex: 1;
    }

    .info-label {
        font-size: 0.75rem;
        color: #6B7280;
        margin-bottom: 2px;
    }

    .info-value {
        font-size: 1rem;
        color: #111827;
        font-weight: 500;
    }

    /* 侧边栏样式 */
    .sidebar-card {
        background: white;
        border-radius: 8px;
        padding: 20px;
        margin-bottom: 16px;
        border: 1px solid #E5E7EB;
    }

    .sidebar-title {
        font-size: 0.875rem;
        font-weight: 600;
        color: #374151;
        margin-bottom: 16px;
        text-transform: uppercase;
        letter-spacing: 0.025em;
    }

    /* 价格显示 */
    .price-display {
        text-align: center;
        padding: 16px 0;
    }

    .price-amount {
        font-size: 2rem;
        font-weight: 700;
        color: #111827;
        margin-bottom: 4px;
    }

    .price-desc {
        font-size: 0.875rem;
        color: #6B7280;
    }

    /* 按钮组 */
    .btn-action {
        width: 100%;
        margin-bottom: 8px;
        border-radius: 6px;
        padding: 10px 16px;
        font-size: 0.875rem;
        font-weight: 500;
        transition: all 0.15s ease;
    }

    .btn-action:hover {
        transform: translateY(-1px);
    }

    .btn-primary-action {
        background: #3B82F6;
        color: white;
        border: none;
    }

    .btn-primary-action:hover {
        background: #2563EB;
    }

    .btn-danger-action {
        background: #EF4444;
        color: white;
        border: none;
    }

    .btn-danger-action:hover {
        background: #DC2626;
    }

    .btn-secondary-action {
        background: white;
        color: #374151;
        border: 1px solid #D1D5DB;
    }

    .btn-secondary-action:hover {
        background: #F9FAFB;
    }

    /* 教练信息卡片 */
    .coach-card {
        display: flex;
        align-items: center;
        gap: 16px;
        padding: 16px;
        background: #F9FAFB;
        border-radius: 8px;
        margin-bottom: 16px;
    }

    .coach-avatar {
        width: 64px;
        height: 64px;
        border-radius: 50%;
        background: white;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #9CA3AF;
        font-size: 1.5rem;
        border: 2px solid #E5E7EB;
    }

    .coach-info {
        flex: 1;
    }

    .coach-name {
        font-weight: 600;
        color: #111827;
        margin-bottom: 4px;
    }

    .coach-detail {
        font-size: 0.875rem;
        color: #6B7280;
    }

    /* 提醒卡片 */
    .alert-card {
        padding: 12px 16px;
        border-radius: 6px;
        margin-bottom: 16px;
        display: flex;
        gap: 12px;
    }

    .alert-warning {
        background: #FEF3C7;
        border-left: 3px solid #F59E0B;
    }

    .alert-info {
        background: #DBEAFE;
        border-left: 3px solid #3B82F6;
    }

    .alert-danger {
        background: #FEE2E2;
        border-left: 3px solid #EF4444;
    }

    .alert-icon {
        color: inherit;
        font-size: 1.25rem;
    }

    .alert-content {
        flex: 1;
    }

    .alert-title {
        font-weight: 600;
        margin-bottom: 4px;
        font-size: 0.875rem;
    }

    .alert-text {
        font-size: 0.875rem;
        line-height: 1.5;
    }

    /* 时间线样式 - 简化 */
    .timeline {
        position: relative;
        padding-left: 24px;
    }

    .timeline::before {
        content: '';
        position: absolute;
        left: 8px;
        top: 8px;
        bottom: 8px;
        width: 2px;
        background: #E5E7EB;
    }

    .timeline-item {
        position: relative;
        padding-bottom: 24px;
    }

    .timeline-item::before {
        content: '';
        position: absolute;
        left: -20px;
        top: 6px;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: white;
        border: 2px solid #3B82F6;
    }

    .timeline-date {
        font-size: 0.75rem;
        color: #9CA3AF;
        margin-bottom: 4px;
    }

    .timeline-title {
        font-weight: 600;
        color: #111827;
        margin-bottom: 4px;
    }

    .timeline-desc {
        font-size: 0.875rem;
        color: #6B7280;
    }

    /* 响应式设计 */
    @media (max-width: 768px) {
        .detail-container {
            padding: 0 12px;
        }

        .detail-card {
            padding: 16px;
        }

        .core-info {
            grid-template-columns: 1fr;
            gap: 16px;
        }

        .detail-header {
            flex-direction: column;
        }
    }

</style>
{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="detail-container">
        <!-- 返回按钮 -->
        <div class="mb-3">
            <a href="{{ url_for('student_reservations.index') }}" class="btn btn-outline-secondary btn-sm">
                <i class="bi bi-arrow-left"></i> 返回列表
            </a>
        </div>

        <div class="row">
            <!-- 主内容区 -->
            <div class="col-lg-8">
                <!-- 主要信息卡片 -->
                <div class="detail-card">
                    <!-- 头部 -->
                    <div class="detail-header">
                        <div class="detail-title">
                            <h4>预约详情 #{{ reservation_data.reservation.id }}</h4>
                            <div class="detail-subtitle">
                                创建于 {{ reservation_data.reservation.created_at.strftime('%Y年%m月%d日 %H:%M') }}
                            </div>
                        </div>
                        <div class="status-badge status-{{ reservation_data.reservation.status }}">
                            {{ reservation_data.reservation.get_status_display() }}
                        </div>
                    </div>

                    <!-- 核心信息 -->
                    <div class="core-info">
                        <div class="info-item">
                            <div class="info-icon">
                                <i class="bi bi-calendar3"></i>
                            </div>
                            <div class="info-content">
                                <div class="info-label">预约日期</div>
                                <div class="info-value">{{ reservation_data.reservation.reservation_date.strftime('%Y年%m月%d日') }}</div>
                            </div>
                        </div>

                        <div class="info-item">
                            <div class="info-icon">
                                <i class="bi bi-clock"></i>
                            </div>
                            <div class="info-content">
                                <div class="info-label">上课时间</div>
                                <div class="info-value">
                                    {{ reservation_data.reservation.start_time.strftime('%H:%M') }} - {{ reservation_data.reservation.end_time.strftime('%H:%M') }}
                                </div>
                            </div>
                        </div>

                        <div class="info-item">
                            <div class="info-icon">
                                <i class="bi bi-hourglass-split"></i>
                            </div>
                            <div class="info-content">
                                <div class="info-label">课程时长</div>
                                <div class="info-value">{{ reservation_data.reservation.duration_minutes }} 分钟</div>
                            </div>
                        </div>

                        <div class="info-item">
                            <div class="info-icon">
                                <i class="bi bi-grid-3x3"></i>
                            </div>
                            <div class="info-content">
                                <div class="info-label">球台</div>
                                <div class="info-value">{{ reservation_data.reservation.table.name }}</div>
                            </div>
                        </div>
                    </div>

                    <!-- 教练信息 -->
                    <div class="coach-card">
                        <div class="coach-avatar">
                            {% if reservation_data.reservation.coach.photo_url %}
                                <img src="{{ reservation_data.reservation.coach.photo_url }}" alt="教练" style="width: 100%; height: 100%; object-fit: cover; border-radius: 50%;">
                            {% else %}
                                <i class="bi bi-person"></i>
                            {% endif %}
                        </div>
                        <div class="coach-info">
                            <div class="coach-name">{{ reservation_data.reservation.coach.real_name }}</div>
                            <div class="coach-detail">
                                <i class="bi bi-award"></i> {{ reservation_data.reservation.coach.level or '专业教练' }} |
                                <i class="bi bi-telephone"></i> {{ reservation_data.reservation.coach.phone }}
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 提醒和警告信息 -->
                {% if reservation_data.reservation.status in ['pending', 'confirmed'] %}
                    {% if reservation_data.reservation.is_upcoming() %}
                    <div class="alert-card alert-info">
                        <div class="alert-icon">
                            <i class="bi bi-info-circle"></i>
                        </div>
                        <div class="alert-content">
                            <div class="alert-title">课程即将开始</div>
                            <div class="alert-text">
                                距离开始还有 <strong id="countdown">{{ reservation_data.time_until_start }}</strong>，请提前到达球台
                            </div>
                        </div>
                    </div>
                    {% endif %}

                    {% if not reservation_data.can_cancel %}
                    <div class="alert-card alert-warning">
                        <div class="alert-icon">
                            <i class="bi bi-exclamation-triangle"></i>
                        </div>
                        <div class="alert-content">
                            <div class="alert-title">取消限制</div>
                            <div class="alert-text">
                                预约开始前24小时内无法取消或修改<br>
                                取消截止：{{ reservation_data.cancellation_deadline.strftime('%m月%d日 %H:%M') }}
                            </div>
                        </div>
                    </div>
                    {% endif %}
                {% endif %}

                {% if reservation_data.reservation.status == 'cancelled' and reservation_data.reservation.cancel_reason %}
                <div class="alert-card alert-danger">
                    <div class="alert-icon">
                        <i class="bi bi-x-circle"></i>
                    </div>
                    <div class="alert-content">
                        <div class="alert-title">取消原因</div>
                        <div class="alert-text">
                            {{ reservation_data.reservation.cancel_reason }}
                            {% if reservation_data.reservation.cancelled_at %}
                            <br><small>取消时间：{{ reservation_data.reservation.cancelled_at.strftime('%Y-%m-%d %H:%M') }}</small>
                            {% endif %}
                        </div>
                    </div>
                </div>
                {% endif %}

                <!-- 历史记录 -->
                <div class="detail-card">
                    <h5 class="mb-3">预约历史</h5>
                    <div class="timeline">
                        <div class="timeline-item">
                            <div class="timeline-date">{{ reservation_data.reservation.created_at.strftime('%m月%d日 %H:%M') }}</div>
                            <div class="timeline-title">创建预约</div>
                            <div class="timeline-desc">预约申请已提交</div>
                        </div>

                        {% if reservation_data.reservation.status != 'pending' %}
                        <div class="timeline-item">
                            <div class="timeline-date">
                                {{ reservation_data.reservation.updated_at.strftime('%m月%d日 %H:%M') }}
                            </div>
                            <div class="timeline-title">
                                {% if reservation_data.reservation.status == 'confirmed' %}
                                    确认预约
                                {% elif reservation_data.reservation.status == 'cancelled' %}
                                    取消预约
                                {% elif reservation_data.reservation.status == 'completed' %}
                                    完成课程
                                {% elif reservation_data.reservation.status == 'no_show' %}
                                    未出席
                                {% endif %}
                            </div>
                            <div class="timeline-desc">
                                状态已更新为{{ reservation_data.reservation.get_status_display() }}
                            </div>
                        </div>
                        {% endif %}
                    </div>
                </div>
            </div>

            <!-- 侧边栏 -->
            <div class="col-lg-4">
                <!-- 价格信息 -->
                <div class="sidebar-card">
                    <div class="sidebar-title">课程费用</div>
                    <div class="price-display">
                        <div class="price-amount">¥{{ "%.2f"|format(reservation_data.reservation.get_price_yuan()) }}</div>
                        <div class="price-desc">{{ reservation_data.reservation.get_duration_hours() }}小时课程</div>
                    </div>
                </div>

                <!-- 操作按钮 -->
                <div class="sidebar-card">
                    <div class="sidebar-title">快捷操作</div>

                    {% if reservation_data.reservation.status == 'pending' and reservation_data.can_edit %}
                    <a href="{{ url_for('student_reservations.edit', reservation_id=reservation_data.reservation.id) }}"
                       class="btn btn-warning btn-action">
                        <i class="bi bi-pencil"></i> 修改预约
                    </a>
                    {% endif %}

                    {% if reservation_data.can_cancel %}
                    <a href="{{ url_for('student_reservations.cancel', reservation_id=reservation_data.reservation.id) }}"
                       class="btn btn-danger-action btn-action">
                        <i class="bi bi-x-circle"></i> 取消预约
                    </a>
                    {% endif %}

                    {% if reservation_data.evaluation_status.has_evaluation %}
                        <!-- 已有评价 -->
                        <a href="{{ url_for('evaluations.detail', evaluation_id=reservation_data.evaluation_status.evaluation.id) }}"
                           class="btn btn-secondary-action btn-action">
                            <i class="bi bi-eye"></i> 查看评价
                        </a>

                        {% if reservation_data.evaluation_status.student_can_modify %}
                        <a href="{{ url_for('evaluations.edit', evaluation_id=reservation_data.evaluation_status.evaluation.id) }}"
                           class="btn btn-secondary-action btn-action">
                            <i class="bi bi-pencil"></i> 修改评价
                        </a>
                        {% endif %}
                    {% elif reservation_data.evaluation_status.student_can_evaluate %}
                        <!-- 可以评价 -->
                        <a href="{{ url_for('evaluations.create', reservation_id=reservation_data.reservation.id) }}"
                           class="btn btn-primary-action btn-action">
                            <i class="bi bi-star"></i> 评价课程
                        </a>
                    {% endif %}

                    <a href="{{ url_for('student_reservations.create') }}"
                       class="btn btn-secondary-action btn-action">
                        <i class="bi bi-plus-circle"></i> 新建预约
                    </a>

                </div>

                <!-- 二维码 -->
                {% if reservation_data.reservation.status in ['pending', 'confirmed'] %}
                <div class="sidebar-card">
                    <div class="sidebar-title">签到二维码</div>
                    <div style="text-align: center; padding: 16px 0;">
                        <canvas id="qrcode"></canvas>
                        <div style="font-size: 0.75rem; color: #6B7280; margin-top: 8px;">
                            到达球台后出示给教练
                        </div>
                    </div>
                </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<!-- 引入 QR Code 库 -->
<script src="https://cdn.jsdelivr.net/npm/qrcode@1.5.3/build/qrcode.min.js"></script>

<script>
// 生成签到二维码
{% if reservation_data.reservation.status in ['pending', 'confirmed'] %}
document.addEventListener('DOMContentLoaded', function() {
    const qrData = {
        type: 'reservation_checkin',
        reservation_id: {{ reservation_data.reservation.id }},
        student_id: {{ reservation_data.reservation.student_id }},
        timestamp: Date.now()
    };

    const qrCanvas = document.getElementById('qrcode');
    if (qrCanvas) {
        QRCode.toCanvas(qrCanvas, JSON.stringify(qrData), {
            width: 150,
            height: 150,
            margin: 1,
            color: {
                dark: '#000000',
                light: '#FFFFFF'
            }
        }, function(error) {
            if (error) {
                console.error('生成二维码失败:', error);
                qrCanvas.parentNode.innerHTML = '<div style="color: #6B7280; font-size: 0.875rem;">二维码生成失败</div>';
            }
        });
    }
});
{% endif %}

// 倒计时功能
{% if reservation_data.reservation.is_upcoming() %}
function updateCountdown() {
    const startTime = new Date('{{ reservation_data.reservation.get_datetime_start().isoformat() }}');
    const now = new Date();
    const diff = startTime - now;

    const countdownEl = document.getElementById('countdown');
    if (!countdownEl) return;

    if (diff <= 0) {
        countdownEl.innerHTML = '课程已开始';
        return;
    }

    const hours = Math.floor(diff / (1000 * 60 * 60));
    const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
    const seconds = Math.floor((diff % (1000 * 60)) / 1000);

    countdownEl.innerHTML =
        `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
}

// 每秒更新倒计时
setInterval(updateCountdown, 1000);
updateCountdown();
{% endif %}
</script>
{% endblock %}